<template>
  <main>
    <div class="bg1">
      <img :src="yjzdsc1.bgImg" alt="" class="banner">
      <span class="yjzdsc">{{yjzdsc1.title}}</span>
      <span class="fh1">{{yjzdsc1.subtitle}}</span>
    </div>
    <div class="bg2">
      <div v-html="yjzdscxqy1"></div>
    </div>
    
    <Header></Header>
    <Footer></Footer>
  </main>
</template>

<script>
import { getYjzdsc,getYjzdscxqy } from "@/api/wslapi/";
//引入头部组件
import Header from "@/components/Header.vue";
// 引入底部组件
import Footer from "@/components/Footer.vue";
export default {
  created () {
    this.yjzdsc();
    this.yjzdscxqy()
  },
  data () {
    return {
      yjzdsc1:[],
      yjzdscxqy1:[],
    }
  },
  methods: {
    yjzdsc() {
      getYjzdsc().then((res) => {
        this.yjzdsc1 = res.data.data;
        console.log(res.data.data);
      });
    },
     yjzdscxqy() {
      getYjzdscxqy().then((res) => {
        this.yjzdscxqy1 = res.data.content;
        console.log(res.data.content);
      });
    },
  },
  components: {
    Header,
    Footer,
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.bg1 {
  height: 600px;
  // background-image: url(./yjzdsc_img/banner.png);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  img[lazy="loading"] {
    width: 200px;
    height: 200px;
  }
  // 实际图片大小
  img[lazy="loaded"] {
    height: 580px;
    width: 100%;
  }
  .banner {
    height: 600px;
    width: 100%;
  }
  .yjzdsc {
    min-width: 309px;
    height: 67px;
    font-size: 48px;
    font-weight: 500;
    color: #ffffff;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 230px;
    left: 361px;
    text-align: left;
  }
  .fh1 {
    min-width: 675px;
    height: 33px;
    font-size: 24px;
    font-weight: 400;
    color: #ffffff;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 321px;
    left: 361px;
    text-align: left;
  }
}
.bg2 {
  height: 2400px;
  position: relative;
  .img11 {
    position: absolute;
    top: 80px;
    left: 360px;
    width: 1200px;
    height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    img[lazy="loading"] {
      width: 200px;
      height: 200px;
    }
    // 实际图片大小
    img[lazy="loaded"] {
      height: 420px;
      width: 100%;
    }
    .image1 {
      width: 1200px;
    }
  }
  .qrqm {
    min-width: 165px;
    height: 56px;
    font-size: 40px;
    font-weight: 400;
    color: #ffffff;
    position: absolute;
    top: 240px;
    left: 878px;
  }
  .fh2 {
    min-width: 738px;
    height: 32px;
    font-size: 20px;
    font-weight: 400;
    color: #ffffff;
    position: absolute;
    top: 308px;
    left: 592px;
  }
}
.bg3 {
  // min-width: 1919px;
  height: 1328px;
  background: #f6f8fb;
  position: relative;
  .cpys {
    min-width: 165px;
    height: 56px;
    font-size: 40px;
    font-weight: 500;
    color: #333333;
    position: absolute;
    top: 80px;
    left: 877px;
  }
  .box1 {
    min-width: 1200px;
    height: 324px;
    background: #ffffff;
    box-shadow: 2px 4px 12px 2px rgba(0, 0, 0, 0.04);
    border-radius: 6px;
    position: absolute;
    top: 196px;
    left: 360px;
    .img12 {
      width: 600px;
      height: 324px;
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      img[lazy="loading"] {
        width: 200px;
        height: 200px;
      }
      // 实际图片大小
      img[lazy="loaded"] {
        height: 324px;
        width: 100%;
      }
      .img1 {
        width: 600px;
      }
    }
    .jllx {
      min-width: 297px;
      height: 45px;
      font-size: 32px;
      font-weight: 500;
      color: #333333;
      position: absolute;
      top: 64px;
      left: 648px;
      text-align: left;
    }
    .fh3 {
      width: 504px;
      height: 96px;
      font-size: 20px;
      font-weight: 400;
      color: #999999;
      position: absolute;
      top: 133px;
      left: 648px;
      text-align: left;
    }
  }
  .box2 {
    min-width: 1200px;
    height: 324px;
    background: #ffffff;
    box-shadow: 2px 4px 12px 2px rgba(0, 0, 0, 0.04);
    border-radius: 6px;
    position: absolute;
    top: 550px;
    left: 360px;
    .img22 {
      width: 600px;
      height: 324px;
      position: absolute;
      top: 0;
      right: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      img[lazy="loading"] {
        width: 200px;
        height: 200px;
      }
      // 实际图片大小
      img[lazy="loaded"] {
        height: 324px;
        width: 100%;
      }
      .img2 {
        width: 600px;
      }
    }
    .zpwz {
      min-width: 363px;
      height: 45px;
      font-size: 32px;
      font-weight: 500;
      color: #333333;
      position: absolute;
      top: 64px;
      left: 48px;
      text-align: left;
    }
    .fh4 {
      width: 504px;
      height: 96px;
      font-size: 20px;
      font-weight: 400;
      color: #999999;
      position: absolute;
      top: 133px;
      left: 48px;
      text-align: left;
    }
  }
  .box3 {
    min-width: 1200px;
    height: 324px;
    background: #ffffff;
    box-shadow: 2px 4px 12px 2px rgba(0, 0, 0, 0.04);
    border-radius: 6px;
    position: absolute;
    top: 904px;
    left: 360px;
    .img33 {
      width: 600px;
      height: 324px;
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      img[lazy="loading"] {
        width: 200px;
        height: 200px;
      }
      // 实际图片大小
      img[lazy="loaded"] {
        height: 324px;
        width: 100%;
      }
      .img3 {
        width: 600px;
      }
    }
    .scyj {
      min-width: 297px;
      height: 45px;
      font-size: 32px;
      font-weight: 500;
      color: #333333;
      position: absolute;
      top: 64px;
      left: 648px;
      text-align: left;
    }
    .fh5 {
      width: 504px;
      height: 64px;
      font-size: 20px;
      font-weight: 400;
      color: #999999;
      position: absolute;
      top: 133px;
      left: 648px;
      text-align: left;
    }
  }
}
</style>
